<template>
  <div>
		<headTop></headTop>
    <div class="buttons-content">
    <el-button type="primary" icon="el-icon-plus" @click="addNewJob()">添加职位</el-button>
    </div> 
<div style="margin:10px">
<el-table :data="jobList" border style="width: 100%" >
   <el-table-column
      type="index"
      width="50"
      label="序号"
      align="center">
    </el-table-column>
    <el-table-column prop="job" label="职务"  width="100" align="center"></el-table-column>
    <el-table-column prop="count" label="人数"  width="80" align="center"></el-table-column>
   <el-table-column
      fixed="right"
      label="操作"
      width="100" 
      align="center">
      <template slot-scope="scope">
          <el-button  icon="el-icon-edit" circle></el-button>
          <el-button  type="danger" icon="el-icon-delete" circle></el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination
  class="page-bottom"
  :page-size="currentPageSize"
  :pager-count="pageCount"
  layout="prev, pager, next, jumper, ->, total"
  :total="totalCount"
  :current-page.sync="currentPage"
  @current-change = "currentPageChange">
  </el-pagination>
   </div>

   </div>
</template>
<script>
import search from "@/components/searchView";
	import headTop from '@/components/headTop'
import {formatDate} from '@/utils/mUtils'
import { getStaffList,addStaff } from '@/api/staffData'
export default {
  inject:['reload'],
  data(){
    return {
        direction: 'rtl',
        jobList:[],
    }
  },
  mounted(){
    this.getJobLists();
  },
  components: {
    search,
    headTop,
    },
    methods:{
   handleEditClick(row){
     
   },
   
   currentPageChange(val){
      this.currentPage = val;
       console.log('页码改变了' + this.currentPage);
      this.getProductList();
   },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      removeProductClick(data){
        this.$confirm('是否删除该员工, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.removePerson(data.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
      },
      addNewPerson(){
				this.$router.push({ path: '/addStaff' })
      },

async getJobLists(){
    try {
        const result = await getJobList(params);
        if (result.code == 200) {
          this.jobList = result.data.data;
          this.reload();
        }
      } catch (error) {
         this.$message({
            type: 'error',
            message: '删除失败!'
          });
      }
},

     async removePerson(data){
         try {
           let params = {
             'id':data
           }
        const result = await deleteproduct(params);
        if (result.code == 200) {
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.reload();
        }
      } catch (error) {
         this.$message({
            type: 'error',
            message: '删除失败!'
          });
      }
      }

    }

}
</script>

<style lang="less">
.buttons-content {
    margin: 10px;
    border-radius: 8px;
    display: inline-flex;
		align-items: center;
}
.page-bottom {
  margin: 10px;
}
</style>